<template>
  <div class="focusWork h100">
    <dividerTitle :title="componentTitle">
      <span @click="openMore()" class="more-btn" v-if="liArr.length >6">更多<i class="el-icon-arrow-right"></i></span>
    </dividerTitle>
    <div class="workList">
      <ul class="no-data" v-if="!liArr.length">暂无数据</ul>
      <ul class="ul-style">
        <template>
            <el-divider v-if="liArr.length >0"></el-divider>
            <li v-for="(item,index) in liArr.slice(0,6)" :key="index">
              <div class="line-content" @click="openFocusPage(item)">
                <div class="line-left" :class="{greenColor:item.color=='red',orangeColor:item.color=='yellow',garyColor:item.color=='gray',blueColor:item.color=='blue'}">
                  <span>{{item.color_type}}</span>
                </div>
                <div class="line-center">
                  <span class="item-title">
                    【{{$store.getters["fineDirtDataName"]("moduleCode_moduleName",item.module)}}】
                    {{item.title||item.name}}</span>
                </div>
                <div class="line-right">
                  <span class="focus" @click.stop="toggleFocus(item)"><i class="iconfont icon-quguan"></i> 取关</span>
                </div>
              </div>
              <el-divider></el-divider>
            </li>
        </template>
      </ul>
    </div>
    <dialogPublic
      title="我关注的工作"
      :show.sync="myFocusWork"
      width="40%"
      :singleClose="true"
      :noFootBtn="true"
      :btnText="btnText"
      @doSubmit="myFocusWorkSubmit"
      @doClose="doClose"
    >
    <div class="dialog-content">
      <div class="search-part">
        <!-- <el-autocomplete
          class="inline-input"
          v-model="searchText"
          sizi="mini"
          :fetch-suggestions="querySearch"
          placeholder="请输入关键字搜索"
          style="width:40%;"
          suffix-icon="el-icon-search"
          :value-key="'color_type'"
          @select="handleSelect"
          :clearable="true"
        ></el-autocomplete> -->
        <el-input
          placeholder="输入关键字过滤"
          size="mini"
          class="inline-input"
          style="width:40%;"
          v-model="filterText"
          :clearable="true"
          suffix-icon="el-icon-search"
        ></el-input>
        <span class="list-total">总共有{{followList.length}}条</span>
      </div>
      <div class="list-part">
        <ul class="ul-style">
          <template>
            <li v-for="(item,index) in followList" :key="index">
              <div class="line-content" @click="openFocusPage(item)">
                <div style="width:10%" class="line-left" :class="{greenColor:item.color=='red',orangeColor:item.color=='yellow',garyColor:item.color=='gray',blueColor:item.color=='blue'}">
                  <span>{{item.color_type}}</span>
                </div>
                <div class="line-center">
                  <span class="item-title">
                    【{{$store.getters["fineDirtDataName"]("moduleCode_moduleName",item.module)}}】
                    {{item.title||item.name}}
                  </span>
                </div>
                <div class="line-right">
                  <span class="focus" @click.stop="toggleFocus(item)"><i class="iconfont icon-quguan"></i> 取关</span>
                </div>
              </div>
              <el-divider></el-divider>
            </li>
          </template>
        </ul>
      </div>
    </div>
    </dialogPublic>
  </div>
</template>

<script>
let that;
import {
  cancelfollow, // 取关
  serchfollow, // 关注列表
} from "@/api/common.js"
export default {
  props:['componentTitle'],
  data() {
    return {
      btnText:['关闭'],
      searchText: "",
      filterText: "",
      restaurants:[],
      myFocusWork:false,
      liArr:[
      ],
      followList: [],
    };
    
  },
  created() {
    that = this;
    this.getFollowList();
    window.addEventListener("storage", e => {
        if (e.key === "follow") {
          this.getFollowList();
        }
      })
  },
  mounted(){
    this.restaurants = this.liArr;
    this.followList = this.liArr;
  },
  watch:{
    filterText(val) {
      if(!val){
        this.followList = this.liArr;
      }else{
        let arr = this.querySearch(val);
        this.followList= arr;
      }
    },
    searchText(val){
      if(val==''){
        this.followList = this.liArr;
      }
    }
  },
  methods: {
    //提交dialog
    myFocusWorkSubmit(){
      this.searchText = "";
      this.filterText = "";
      this.myFocusWork = false
    },
    //更多按钮点击
    openMore(){
      this.myFocusWork = true
    },
    // 获取关注列表
    getFollowList(){
      serchfollow({}).then(res=>{
        this.liArr = res.data;
        this.restaurants = this.liArr;
        this.followList = this.liArr;
      })
    },
    //切换关注状态
    toggleFocus(item){
      let data = {};
      data.page_id = item.page_id;
      this.$confirm('是否取消关注此工作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        cancelfollow(data).then(res=>{
          this.getFollowList();
          localStorage.removeItem('unFollow');
          localStorage.setItem("unFollow", "unFollow");
          this.searchText = "";
        })
      }).catch(() => {
                   
      });
    },
    //搜索
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      return results;
    },
    createFilter(queryString) {
      return (restaurant) => {
        if(restaurant.name){
          return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        }
        if(restaurant.title){
          return (restaurant.title.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        }
      };
    },
    //选中下拉框事件
    handleSelect(item) {
      // 设置列表数据为选择的
    },
    doClose(){
      this.searchText = "";
      this.filterText = "";
      this.myFocusWork = false;
      this.getFollowList();
    },
    //点击关注项跳转到指定页面
    openFocusPage(item){
      let list = this.$store.getters["dirtData"]("module_router");
      let routerName = "";
      for(let i=0;i<list.length;i++){
        if(item.module == list[i].label){
          routerName = list[i].value;
          break;
        }
      }
      const { href } = this.$router.resolve({
        name: routerName,
        query: {
          pageType: item.page_type,
          id: item.page_id, 
          val: item.page_id,
        },
      });
      window.open(href, "_blank");
    },
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter: function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 1, height: '1.6em' },
          { complete: done }
        )
      }, delay)
    },
    leave: function (el, done) {
      var delay = el.dataset.index * 150
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 0, height: 0 },
          { complete: done }
        )
      }, delay)
    }
  },
};
</script>

<style lang="less" scoped>
.focusWork{
  height: 100%;
  width: 100%;
  .workList{
    height: calc(100% - 75px);
    overflow-y: auto;
    /deep/.el-divider {
      background-color:#EFEFEF!important;
    }
  }
  /deep/.el-divider--horizontal {
      margin: 11px 0;
      &:first-child{
        margin: 0 0 11px 0;
      }
    }
    .ul-style{
      margin: 0 45px;
    }
    .line-content{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items:center;
      .line-left{
        width: 60px;
        width: 12%;
        line-height: 28px;
        height: 28px;
        border-radius: 14px;
        text-align: center;
      }
      .line-center{
        text-align: left;
        width: 75%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        .item-title{
          color: #666666;
          cursor: pointer;
        }
        .item-title:hover{
          color: #0D60B4;
        }
      }
      .line-right{
        text-align: right;
        width: 12%;
        font-size: 14px;
        cursor: pointer;
        .focus{
          color: #666666;
          &:hover{
            color: #999999;
          }
        }

      }
    }
  
}
.list-part{
  margin-top: 15px;
  height: 560px;
  overflow-y: auto;
}
.search-part{
  display: flex;
  justify-content: space-between;
  margin: 0 40px;
  align-items: center;
}
.list-total{
  font-size: 14px;
  color: #999999;
}
.dialog-content{
  height: 100%;
  width: 100%;
}
.more-btn{
  font-size: 14px;
  color: #999999;
  &:hover{
    cursor: pointer;
    color: #0D60B4;
  }
}
.no-data{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#a7a7a7
}
.garyColor{
  color:gray;
  background: rgb(240,238,239);
}
.greenColor{
  color:rgb(225,90,94);
  background: rgb(255,230,229);
}
.blueColor{
  color:#0D60B4;
  background: #E1EFFC;
}
.orangeColor{
  color:#FAA224;
  background: #FFF5E8;
}
/deep/.el-input--suffix .el-input__inner{
  height: 32px;
  line-height: 32px;
}


//动画效果相关样式
/* .list-enter-active, .list-leave-active {
  transition: all 2s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(-30px);
} */

.v-enter,.v-leave-to{
  opacity:0;
  transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{
  transition:all 0.6s ease;
}
.v-move{    
  /*下面的 .v-move和.v-leave-active 配合使用，能够实现列表后续的元素渐渐飘上来的效果*/
  transition:all 0.6s ease;
}
.v-leave-active{
  position:absolute;   
}
.list-complete-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}
</style>